<template>
  <div class="home">
    <Head></Head>
    <Banner :list="bannerlist"></Banner>
    <Grid :gridlist="gridList"></Grid>
    <Adv :list="advlist_one"></Adv>
    <Hot :hotlst="hotlist" :title="hot_title"></Hot>
    <Adv :list="advlist_two"></Adv>
    <Like></Like>
  </div>
</template>

<script>
import Head from "./components/Head";
import Banner from "./components/Banner";
import Grid from "./components/Grid.vue";
import Hot from "./components/Hot.vue";
import Adv from "./components/Adv.vue";
import Like from "./components/Like.vue";

//引入api接口
import { reqHomeApi } from "@/services";

export default {
  name: "home",
  data() {
    return {
      bannerlist: [],
      gridList: [],
      hotlist: [],
      hot_title: "",
      advlist_one: [],
      advlist_two: [],
    };
  },
  components: {
    Head,
    Banner,
    Grid,
    Hot,
    Adv,
    Like,
  },
  created() {
    this.initReq();
  },
  methods: {
    //请求初始数据
    async initReq() {
      const res = await reqHomeApi();
      if (res.code == 200) {
        this.bannerlist = res.data[0].list;
        const list = res.data[1].list;
        this.gridList = this.headerList(list, 8);
        // console.log(res);
        this.hotlist = res.data[4].list;
        this.hot_title = res.data[4].title;
        this.advlist_one = res.data[2].list;
        this.advlist_two = res.data[3].list;
      }
      // console.log();
    },
    headerList(list, n) {
      var res = [];
      var m = Math.ceil(list.length / n);
      for (var i = 0; i < m; i++) {
        var start = i * n;
        var end = (i + 1) * n;
        res.push(list.slice(start, end));
      }
      return res;
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  padding-bottom: 100px;
  overflow: hidden;
  background-color: #fafafa;
  hr {
    padding: 0 40px;
  }
}
</style>
